<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Viewer - Cesium Documentation</title>

    <!--[if lt IE 9]>
      <script src="javascript/html5.js"></script>
    <![endif]-->
    <link href="styles/jsdoc-default.css" rel="stylesheet">
    <link href="styles/prism.css" rel="stylesheet">
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        .nav_menus {
            width: 300px;
            height: 100vh;
            height: 100vh;
            display: inline-block;
        }

        .container {
            height: 100vh;
            display: inline-block;
            width: calc(100vw - 305px);
        }
    </style>
</head>

<body>
    <div style="position: fixed;z-index: 999;top: 93vh;right: 25px;">
        <div id="toggleToc">
            <img onclick="switch_menus('hide')" src="./icons/hide.png" alt="全屏">
        </div>
        <div id="toggleToc2" style="margin-bottom: 15px;display: none;">
            <img onclick="switch_menus('show')" src="./icons/show.png" alt="取消全屏">
        </div>
    </div>
    <div class="nav_menus">
        <iframe src="./app_menus.html" frameborder="0" style="width: 100%;height:100%"></iframe>
    </div>
    <div class="container">
        <iframe id="apiDoc" src="./app_main.html" frameborder="0" style="width: 100%;height:100%"></iframe>
    </div>
    <!-- <script src="javascript/prism.js"></script>
    <script src="javascript/cesiumDoc.js"></script> -->

</body>
<script>
    //切换菜单
    function switch_api(html) {
        var ele = document.getElementById('apiDoc').src = html;
    }

    function switch_menus(display) {
        var ele = document.getElementById("toggleToc");
        var ele2 = document.getElementById("toggleToc2");
        var ele_nav = document.getElementsByClassName("nav_menus")[0];
        var ele_main = document.getElementsByClassName("container")[0];
        if (display == "hide") {
            ele.style.display = "none";
            ele2.style.display = "block";

            ele_nav.style.display = 'none';
            ele_main.style.width = '100vw';
        } else {
            ele.style.display = "block";
            ele2.style.display = "none";

            ele_nav.style.display = 'inline-block';
            ele_main.style.width = 'calc(100vw - 305px)';
        }
    }
</script>

</html>